<template>
  <div>
    <div class="contain" @mouseover="handHover">
      <div class="centerContain">
        <div class="left" ref="left">
          <div class="menu" ref="menu">
            <div class="menuOne" v-for="(item, index) in menuList">
              <div class="menuClassOne" v-if="item?.children">
                <div class="meunLine" :data-text="index + 1" data="none">
                  <div class="imgContain divCenter">
                    <img
                      :src="item.icon1"
                      alt=""
                      v-if="Active == index + 1"
                      class="imgNone"
                    />
                    <img :src="item.icon" class="imgNone" alt="" v-else />
                  </div>
                  <div class="menuName" v-show="leftOrRight == 'left'">
                    {{ item.name }}
                  </div>
                </div>
                <div :class="menuSon">
                  <div
                    v-for="it in item.children"
                    class="meunLine1"
                    @click="clickMenuSon($event, item.active, it.path)"
                  >
                    {{ it.name }}
                  </div>
                </div>
              </div>
              <div class="menuClassOne" v-else>
                <div
                  class="divFlex meunLine"
                  :data-text="index + 1"
                  :data="item.path"
                >
                  <div class="imgContain divCenter">
                    <img
                      :src="item.icon1"
                      class="imgNone"
                      alt=""
                      v-if="Active == index + 1"
                    />
                    <img :src="item.icon" class="imgNone" alt="" v-else />
                  </div>
                  <div class="menuName" v-show="leftOrRight == 'left'">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <el-menu
            :default-active="Active"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="handleMenuSelect"
          >
            <template v-for="(item, index) in menuList">
              <el-sub-menu
                v-if="item.children && item.children.length > 0"
                :index="String(index)"
              >
                <template #title>
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item-group v-for="(it, inde) in item.children">
                  <el-menu-item
                    :index="it.path"
                    style="padding-left: 18px !important"
                    >{{ it.name }}</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>
              <el-menu-item
                v-else
                :index="item.path"
                style="padding-left: 5px !important"
                >{{ item.name }}</el-menu-item
              >
            </template>
          </el-menu>
          -->
        </div>
        <div class="rigth" ref="right">
          <div class="rightTop divFlex">
            <div class="iconClick">
              <img
                v-show="leftOrRight == 'left'"
                @click="changeLeft()"
                src="@/assets/img/iconLeft.png"
                alt=""
                width="100%"
                height="100%"
              />
              <img
                @click="changeLeft()"
                v-show="leftOrRight == 'right'"
                src="@/assets/img/iconRight.png"
                alt=""
                width="100%"
                height="100%"
              />
            </div>
            <div class="RightTopName divCenter">爱信安庆工厂能耗平台</div>
          </div>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import EventBus from "@/mitt/eventBus.js";
import $ from "jquery";
import icon1 from "@/assets/img/icon/icon1.png";
import icon2 from "@/assets/img/icon/icon2.png";
import icon3 from "@/assets/img/icon/icon3.png";
import icon4 from "@/assets/img/icon/icon4.png";
import icon5 from "@/assets/img/icon/icon5.png";
import icon6 from "@/assets/img/icon/icon6.png";
import icon7 from "@/assets/img/icon/icon7.png";
import icon8 from "@/assets/img/icon/icon8.png";
import icon9 from "@/assets/img/icon/icon9.png";
import icon10 from "@/assets/img/icon/icon10.png";
export default {
  beforeRouteEnter(to, from, next) {
    console.log(to.path);
    console.log("组件内守卫 - beforeRouteEnter");

    next();
  },
  data() {
    return {
      leftOrRight: "left",
      navName: "案例数据",
      left: "left1",
      menuList: [
        {
          name: `数据大屏`,
          path: "/homePage",
          icon: icon1,
          icon1: icon6,

          active: 1,
        },
        {
          name: "智慧展示",
          icon: icon2,
          icon1: icon7,
          path: "/enenger",
          // children: [
          //   { name: "数据监控", path: "/enenger" },
          //   { name: "分组管理", path: "/group" },
          // ],
          active: 2,
        },

        {
          name: "能耗分析",
          // path: "/enenger",
          icon: icon3,
          icon1: icon8,
          active: 3,
          children: [
            { name: "用能分析", path: "/userneneger" },
            { name: "用能情况", path: "/thing" },
            { name: "设备用能分析", path: "/anlyenenger" },
            { name: "复费率电费", path: "/pay" },
          ],
        },
        {
          name: "设备管理",
          path: "/device",
          icon: icon4,
          icon1: icon9,
          active: 4,
        },
        {
          name: "系统设置",
          icon: icon5,
          icon1: icon10,
          active: 5,
          children: [
            { name: "角色管理", path: "/role" },
            { name: "告警管理", path: "/warning" },
            { name: "全局设置", path: "/allset" },
          ],
        },
        {
          name: "分组管理",
          icon: icon2,
          icon1: icon7,
          path: "/group",
          // children: [
          //   { name: "数据监控", path: "/enenger" },
          //   { name: "分组管理", path: "/group" },
          // ],
          active: 6,
        },
      ],
      showQuit: false,
      Active: 1,
      menuSon: "menuSon1",
    };
  },
  methods: {
    handleMenuSelect(index) {
      sessionStorage.setItem("Active", index);
      this.$router.push(index);
      // index 是被点击菜单的 index 值（字符串或数字）
    },

    changeLeft() {
      if (this.leftOrRight == "left") {
        this.leftOrRight = "right";
        this.$refs.menu.style.width = "2.5rem";
        this.menuSon = "menuSon2";
        let meunLine = $(".meunLine");
        for (let i = 0; i < meunLine.length; i++) {
          $(meunLine[i]).next().css({ display: "none" });
        }
        console.log(this.leftOrRight);
      } else if (this.leftOrRight == "right") {
        this.leftOrRight = "left";
        this.$refs.menu.style.width = "8rem";
        this.menuSon = "menuSon1";
        let meunLine = $(".meunLine");
        for (let i = 0; i < meunLine.length; i++) {
          $(meunLine[i]).next().css({ display: "none" });
        }

        this.Active = sessionStorage.getItem("Active");
        $(meunLine[this.Active - 1])
          .next()
          .css({ display: "block" });
      }
    },
    changePage() {
      console.log(item.path);
    },

    clickMenuSon(a, number, path) {
      // console.log(path);
      console.log(a.target.innerText);
      sessionStorage.setItem("SonName", a.target.innerText);
      this.$router.push(path);
      if (this.path != "/homePage") {
        // sessionStorage.setItem("Active", number);
      }
      this.Active = number;
      let meunLine1 = $(".meunLine1");
      let meunName = $(".menuName");
      for (let i = 0; i < meunName.length; i++) {
        meunName[i].style.color = "white";
      }
      for (let i = 0; i < meunLine1.length; i++) {
        meunLine1[i].style.background = "#063A7D";
        meunLine1[i].style.color = "white";
      }
      a.target.style.background = "#011B5A";
      a.target.style.color = "#00F3FF";

      $(a.target)
        .parent()
        .siblings()
        .children()
        .last()
        .css({ color: " #00F3FF" });
    },
    forLast() {
      try {
        if (sessionStorage.getItem("SonName")) {
          let son = sessionStorage.getItem("SonName");
          let meunLine1 = $(".meunLine1");

          for (let i = 0; i < meunLine1.length; i++) {
            if (meunLine1[i].innerText == son) {
              meunLine1[i].style.background = "#011B5A";
              meunLine1[i].style.color = "#00F3FF";
            } else {
              meunLine1[i].style.color = "white";
              meunLine1[i].style.background = "#063A7D";
            }
          }
        }
      } catch (error) {}
      try {
        if (sessionStorage.getItem("Active")) {
          this.Active = sessionStorage.getItem("Active");
          let meunLine1 = $(".meunLine");
          meunLine1[this.Active - 1].style.color = "#00F3FF";
          $(meunLine1[this.Active - 1]).next()[0].style.display = "block";
        }
      } catch (error) {}
    },

    backOneOrUp(e) {
      let son = e.SonName;
      let meunLine1 = $(".meunLine1");

      for (let i = 0; i < meunLine1.length; i++) {
        if (meunLine1[i].innerText == son) {
          meunLine1[i].style.background = "#011B5A";
          meunLine1[i].style.color = "#00F3FF";
        } else {
          meunLine1[i].style.background = "#063A7D";
          meunLine1[i].style.color = "white";
        }
      }

      this.Active = e.Active;
      try {
        let meunLine = $(".meunLine");
        meunLine[this.Active - 1].style.color = "#00F3FF";

        let menuName = $(".menuName");
        for (let i = 0; i < menuName.length; i++) {
          if (this.Active - 1 == i) {
            menuName[i].style.color = "#00F3FF";
          } else {
            menuName[i].style.color = "white";
          }
        }
      } catch (error) {}

      // $(meunLine1[this.Active - 1]).next()[0].style.display = "block";
      // console.log(
      //   ()
      //   // .css("display")
      // );
    },
    handHover(event) {
      if (this.leftOrRight == "right") {
        const hoveredElement = event.target;
        const classList = hoveredElement.classList;
        let list = [
          "menu",
          "meunLine",
          "meunLine1",
          "imgNone",
          "imgContain divCenter",
        ];
        if (!list.includes(hoveredElement.className)) {
          $(".menuSon2").hide();
        }
        list = null;
      }
    },
  },

  created() {
    try {
      if (sessionStorage.getItem("Active")) {
        this.Active = sessionStorage.getItem("Active");
        console.log("this.Active=", this.Active);
      }
    } catch (error) {}
  },
  beforeMount() {},
  mounted() {
    let that = this;
    this.forLast();
    EventBus.on("custom-event", function (e) {
      that.$nextTick(function () {
        that.backOneOrUp(e);
      });
    });

    $(".meunLine").click(function () {
      console.log(this);
      if (that.leftOrRight == "left") {
        if ($(this).attr("data") !== "none") {
          that.$router.push($(this).attr("data"));
        }
        try {
          if ($(this).next().css("display") == "none") {
            $(this).next().css({ display: "block" });
          } else {
            $(this).next().css({ display: "none" });
          }
        } catch (error) {}
        that.Active = $(this).attr("data-text");
        let menuLine = $(".meunLine");
        let meunName = $(".menuName");
        for (let i = 0; i < menuLine.length; i++) {
          menuLine[i].style.color = "white";
        }
        for (let i = 0; i < meunName.length; i++) {
          meunName[i].style.color = "white";
        }
        this.style.color = "#00F3FF";
        $(this).children().last()[0].style.color = "#00F3FF";

        if ($(this).last()[0].innerText == "设备管理") {
          let meunLine1 = $(".meunLine1");
          for (let i = 0; i < meunLine1.length; i++) {
            meunLine1[i].style.background = "#063A7D";
            meunLine1[i].style.color = "white";
          }
        }
        if ($(this).last()[0].innerText == "分组管理") {
          let meunLine1 = $(".meunLine1");
          for (let i = 0; i < meunLine1.length; i++) {
            meunLine1[i].style.background = "#063A7D";
            meunLine1[i].style.color = "white";
          }
        }
        if ($(this).last()[0].innerText !== "数据大屏") {
          sessionStorage.setItem("Active", that.Active);
        }
        if ($(this).last()[0].innerText == "设备管理") {
          sessionStorage.setItem("SonName", "");
        }
      } else if (that.leftOrRight == "right") {
        if ($(this).attr("data") !== "none") {
          that.$router.push($(this).attr("data"));
        }
      }
    });
    $(".meunLine").mouseenter(function () {
      if (that.leftOrRight == "right") {
        that.Active = $(this).attr("data-text");

        $(".menuSon2").hide();
        $(this).next().show();
      }
    });
    // $(".meunLine").mouseover(function () {
    //   $(this).next().hide();
    // });
  },
};
</script>
<style lang="less" scoped>
.menu {
  width: 8rem;
  color: white;
  height: 100vh;
  background: #063a7d;
}
.menuSon1 {
  display: none;
  background: #063a7d;
  width: 100%;
  font-size: 0.8rem;
}
.menuSon2 {
  display: none;
  background: #063a7d;
  width: 8rem;
  position: absolute;
  left: 2.5rem;
  z-index: 10;
  font-size: 0.8rem;
  top: 0;
}
.menuClassOne {
  position: relative;
}
.imgContain {
  width: 1.7rem;
  // height: 1.7rem;

  padding-left: 0.5rem;
  // img {
  //   width: 100%;
  //   height: auto;
  //   // object-fit: fill;
  // }
}
.meunLine {
  display: flex;
  align-items: center;
  height: 3rem;
  align-items: center;
  color: white;
}
.meunLine1 {
  // display: flex;
  width: 100%;
  line-height: 3rem;
  align-items: center;
  color: white;
  text-indent: 2.2rem;
  font-family: smallMenu;
}
.menuName {
  padding-left: 0.5rem;
  font-size: 1rem;
  font-family: smallMenu;
}
.rightTop {
  width: 100%;
  height: 7vh;
  background: #d4e5f7;
  .iconClick {
    width: 1.56rem;

    height: 1.56rem;
    margin-left: 0.5rem;
    img {
      min-width: 30px;
      min-height: 26px;
      object-fit: fill;
    }
  }
  .RightTopName {
    color: #06397d;
    font-size: 1.5rem;
    font-weight: 600;
    margin-left: 0.5rem;
    font-family: smallMenu;
  }
}

.contain {
  color: white;
  font-size: 1vw;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: white;
  background-size: 100% 100%;

  .rigth {
    flex-grow: 1;
    height: calc(100vh - 50px);
  }
}

.centerContain {
  // width: 94vw;

  // background: blue;
  // margin: auto;
  height: calc(100%-50px);
  display: flex;
  // justify-content: space-between;
}
// .menuOne:nth-child(1) {
//   margin-top: 7vh;
// }
.menu {
  // overflow: hidden;
  padding-top: 7vh;
}
</style>